import React, { FC, useState, useEffect } from 'react'
import { Button, Divider, message } from 'antd'
import ProductionVoucher from '~/components/production-voucher'
import { useNavigate, useLocation } from 'react-router-dom'
import TopHeader, { ListTitle } from '~/components/top-header'
import { queryCastItems, handleCancelBorrow } from '~/api/borrow-property-api'

import { FooterAction, TextDescription, TextDescriptionWrapper } from './styled'
import BorrowedList from './container/borrowed-list'
import { BorrowReasonMap } from '~/constants'

const PropertyInvolved: FC = () => {
  const { state }: any = useLocation()
  const navigate = useNavigate()
  const [certificateVisible, setCertificateVisible] = useState(false)
  const [castItems, setCastItems] = useState([])

  const {
    caseCompanyName,
    caseDepartmentName,
    caseName,
    caseNo,
    createCompanyName,
    createDepartmentName,
    batchNo
  } = state

  const handleBorrowedCaseList = async () => {
    console.log('xixi')
    const { data } = await queryCastItems({
      batchNo
    })

    setCastItems(data)
  }

  const onClickCancelBorrow = async () => {
    await handleCancelBorrow({ batchNo })
    message.success('撤销借用成功～')
    navigate(-1)
  }

  useEffect(() => {
    handleBorrowedCaseList()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const headData = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen: [
        { label: '办案单位:', value: caseCompanyName || createCompanyName },
        { label: '办案部门:', value: caseDepartmentName || createDepartmentName }
      ]
    }
  ]

  console.log('sss', state)

  return (
    <div>
      <TopHeader headData={headData} />
      <ListTitle />
      <Divider />
      <main style={{ marginTop: 21 }}>
        <BorrowedList waitCastItems={castItems} />
        <h3>借用信息</h3>
        <TextDescriptionWrapper>
          <TextDescription>
            <label>借用部门：</label>
            <span>{state.borrowDepartmentName}</span>
          </TextDescription>
          <TextDescription style={{ marginLeft: '2%' }}>
            <label>借用人员：</label>
            <span>{state.borrowUserName}</span>
          </TextDescription>
        </TextDescriptionWrapper>
        <TextDescriptionWrapper style={{ marginTop: 8 }}>
          <TextDescription>
            <label>借用事由：</label>
            <span>{BorrowReasonMap.get(state.borrowReason)}</span>
          </TextDescription>
        </TextDescriptionWrapper>
        <Divider />

        <h3>拍照</h3>
        <TextDescriptionWrapper>
          <TextDescription>
            <div>暂无数据</div>
          </TextDescription>
        </TextDescriptionWrapper>
        <Divider />

        <h3>法律文书</h3>
        <TextDescriptionWrapper>
          <TextDescription>
            <div>暂无数据</div>
          </TextDescription>
        </TextDescriptionWrapper>
        <Divider />

        <h3>借用人拍照</h3>
        <TextDescriptionWrapper>
          <TextDescription>
            <div>暂无数据</div>
          </TextDescription>
        </TextDescriptionWrapper>
        <Divider />

        <h3>借用人签名</h3>
        <TextDescriptionWrapper>
          <TextDescription>
            <div>暂无数据</div>
          </TextDescription>
        </TextDescriptionWrapper>
        <Divider />

        <FooterAction>
          <div>
            {state.borrowStatus !== -255 && (
              <Button style={{ marginRight: 10 }} onClick={onClickCancelBorrow}>
                撤销借用
              </Button>
            )}
            <Button
              onClick={() => {
                navigate(-1)
              }}
            >
              返回
            </Button>
          </div>
        </FooterAction>
      </main>

      <ProductionVoucher
        onOk={() => {
          setCertificateVisible(false)
        }}
        onCancel={() => {
          setCertificateVisible(false)
        }}
        visible={certificateVisible}
      />
    </div>
  )
}

export default PropertyInvolved
